<template>
  <div>
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/index/jjxt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/index" />
    <!-- 顶部导航栏 -->

    <!-- 页面内容 -->
    <div class="content">
      <div class="inner-content-left">
        <!-- 供电系统安全天 -->
        <power-supply-system-safe-day class="power-supply-system-safe-day-style" />
        <!-- 供电系统安全天 -->

        <!-- 文章列表 -->
        <article-list
          class="article-list-left-one-style"
          title="安全管理"
          :page-size="5"
          dt-id="ARTICLE_000001"
        />
        <!-- 文章列表 -->

        <!-- 文章列表 -->
        <article-list
          class="article-list-left-two-style"
          title="设备管理"
          :page-size="5"
          dt-id="ARTICLE_000002"
        />
        <!-- 文章列表 -->
      </div>

      <div class="inner-content-middle">
        <!-- 重要新闻 -->
        <important-news class="important-news-style" />
        <!-- 重要新闻 -->
      </div>

      <div class="inner-content-right">
        <!-- 文章列表 -->
        <article-list
          class="article-list-right-one-style"
          title="高铁管理"
          :page-size="6"
          dt-id="ARTICLE_000003"
        />
        <!-- 文章列表 -->

        <!-- <div class="inner-content-right-article-list"> -->
        <!-- 文章列表 -->
        <article-list
          class="article-list-right-two-style"
          title="普铁管理"
          :page-size="5"
          dt-id="ARTICLE_000004"
        />
        <!-- 文章列表 -->

        <!-- 文章列表 -->
        <article-list
          class="article-list-right-three-style"
          title="电力管理"
          :page-size="5"
          dt-id="ARTICLE_000005"
        />
        <!-- 文章列表 -->
        <!-- </div> -->
      </div>
    </div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import '@/styles/jjxt/index.css';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import PowerSupplySystemSafeDay from './components/PowerSupplySystemSafeDay';
import ImportantNews from './components/ImportantNews';
import ArticleList from './components/ArticleList';

export default {
  name: 'Index',
  components: {
    TopNavigationBar,
    PowerSupplySystemSafeDay,
    ImportantNews,
    ArticleList
  },
  data() {
    return {
      // 查询列表请求参数
      getDataListData: {
        startDate: '',
        endDate: '',
        title: '',
        articleType: '',
        uploadName: '',
        page: 1,
        size: 20
      }
    };
  },
  mounted() {

  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
#background {
  background-color: #071742;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  .inner-content-left {
    position: absolute;
    top: 88px;
    left: 20px;
    bottom: 20px;
    .power-supply-system-safe-day-style {
      height: 34%;
    }
    .article-list-left-one-style {
      height: calc(33% - 20px);
      margin-top: 20px;
    }
    .article-list-left-two-style {
      height: calc(33% - 20px);
      margin-top: 20px;
    }
  }
  .inner-content-middle {
    position: absolute;
    top: 88px;
    left: 510px;
    bottom: 20px;
    .important-news-style {
      position: relative;
      height: 100%;
    }
    .graphic-article-list-style {
      position: absolute;
      top: 645px;
      left: 509px;
      bottom: 23px;
    }
  }
  .inner-content-right {
    position: absolute;
    top: 88px;
    left: 1430px;
    bottom: 20px;
    .article-list-right-one-style {
      height: 34%;
    }
    .article-list-right-two-style {
      height: calc(33% - 20px);
      margin-top: 20px;
    }
    .article-list-right-three-style {
      height: calc(33% - 20px);
      margin-top: 20px;
    }
  }
}
</style>
